<template>
  <div class="full-screen">
    <div class="product-bannner">
      <van-swipe @change="onChange">
        <van-swipe-item>
          <div class="banner-contain">
            <img :src="require('../../../images/product/product_1.png')" />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="banner-contain">
            <img :src="require('../../../images/product/product_2.jpg')" />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="banner-contain">
            <img :src="require('../../../images/product/product_3.jpg')" />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="banner-contain">
            <img :src="require('../../../images/product/product_4.jpg')" />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="banner-contain">
            <img :src="require('../../../images/product/product_5.jpg')" />
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="banner-contain">
            <img :src="require('../../../images/product/product_6.jpg')" />
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/6</div>
        </template>
      </van-swipe>
      <div class="product-back-arrow">
        <img :src="require('../../../images/product/back.png')" />
      </div>
    </div>
    <div class="product-main">
      <div class="product-title">
        <h1>
          <i>自营</i>
          华为/HUAWEI P40 6GB+128GB 亮黑色 麒麟990 SoC芯片超感知 徕卡三摄
          30倍数字变焦纯粹美学 移动电信联通5G全网通手机
        </h1>
        <div class="product-follow">
          <img :src="require('../../../images/product/follow.png')" />
        </div>
      </div>
      <p class="product-describe">
        以旧换新至高返3000元，麒麟990 SoC芯片，徕卡三摄，30倍数字变焦
        <span>
          畅享20新品系列晒单返30元云钻，享30天无忧退换
        </span>
      </p>
      <div class="product-member">
        <div>
          <img :src="require('../../../images/product/super.png')" />
        </div>
        <p>开通会员预计可省<i>18.85</i>元</p>
        <div>
          查看详情
          <img :src="require('../../../images/product/right_arrow.png')" />
        </div>
      </div>
      <div class="product-by-stages">
        <div>
          分期
        </div>
        <p>开通任性付返50元礼包</p>
        <div>
          立即激活
          <img :src="require('../../../images/product/right_arrow.png')" />
        </div>
      </div>
      <div class="product-ranking">
        <div>
          榜单
        </div>
        <p>此商品已入选[5G全屏手机榜]第一名</p>
        <div>
          <img :src="require('../../../images/product/right_arrow.png')" />
        </div>
      </div>
      <div class="product-parameter">
        <div class="product-color">
          <div>已选</div>
          <p>亮黑色，5G版 6GB+128GB 1件 可选增值服务</p>
          <div>
            <img :src="require('../../../images/product/right_arrow.png')" />
          </div>
        </div>
        <div class="product-address">
          <div>送至</div>
          <div>
            <p>
              广东 广州 荔湾区 全区
              <img :src="require('../../../images/product/right_arrow.png')" />
            </p>
            <p>现货 明天23:00前付款,预计下周二(9月29日)送达</p>
          </div>
        </div>
        <div class="product-pay">
          <div>付款</div>
          <div>支付 支付宝</div>
        </div>
        <div class="product-freight">
          <div>运费</div>
          <div>免运费</div>
        </div>
        <div class="product-weight">
          <div>重量</div>
          <div>0.49kg</div>
          <div>
            <img :src="require('../../../images/product/right_arrow.png')" />
          </div>
        </div>
      </div>
      <div class="product-evaluate">
        <div class="product-top">
          <p>评价(2.3万+)</p>
          <p>
            99%好评率
            <img :src="require('../../../images/product/right_arrow.png')" />
          </p>
        </div>
        <div class="product-evaluate-main">
          <div class="product-evaluate-main-top">
            <div>
              <van-image
                round
                width="1.05rem"
                height="1.05rem"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
                class="evaluate-person-logo"
              />
              摇***看
              <img :src="require('../../../images/product/super.png')" />
            </div>
            <div>
              <van-rate
                v-model="starRating"
                size="0.7rem"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
          </div>
          <div class="product-evaluate-main-middle">
            <p>
              <span>精华</span>
              过生日,送自己一台好手机！的哈达hi嗲hi嗲uU盾哈爱ID阿花覅发哈还i安达市多发发生大师傅
            </p>
            <div class="product-evaluate-images">
              <ul>
                <li>
                  <img
                    :src="require('../../../images/product/evaluate_1.jpg')"
                  />
                </li>
                <li>
                  <img
                    :src="require('../../../images/product/evaluate_2.jpg')"
                  />
                </li>
                <li>
                  <img
                    :src="require('../../../images/product/evaluate_3.jpg')"
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="product-evaluate-all">
          <button>查看全部</button>
        </div>
      </div>
    </div>
    <div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      starRating: 5,
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../../style/mixin';
.full-screen {
  .fullScreen();
  overflow: auto;
  // margin-bottom: 2rem;
}
.product-bannner {
  position: relative;
  .banner-contain {
    height: 16rem;
    width: 16rem;
    > img {
      width: 16rem;
      height: 16rem;
    }
  }
  .product-back-arrow {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    width: 1.4rem;
    height: 1.4rem;
    // background-color: black;
    > img {
      width: 1.4rem;
      height: 1.4rem;
    }
  }
}
.product-main {
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  .product-title {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: flex;
    > h1 {
      font-size: 0.7rem;
      font-weight: 600;
      color: #333;
      width: 13.4rem;
      > i {
        background-color: #ffcc00;
        padding: 0 0.1rem;
        font-size: 0.7rem;
      }
    }
    .product-follow {
      flex: 1;
      > img {
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }
  .product-describe {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    font-size: 0.6rem;
    > span {
      color: #ff4422;
      text-decoration: underline;
    }
  }
  .product-by-stages,
  .product-ranking,
  .product-member {
    // margin-left: 0.25rem;
    // margin-right: 0.25rem;
    margin-top: 0.3rem;
    display: flex;
    font-size: 0.6rem;
    height: 1.8rem;
    line-height: 1.8rem;
    color: #333;
    border-top: 4px solid #f2f2f2;
    > div {
      &:nth-child(1) {
        margin-left: 0.25rem;
        width: 2.3rem;
        text-align: center;
        > img {
          width: 2.3rem;
          height: 0.6rem;
          position: relative;
          top: 0.1rem;
        }
      }
      &:nth-child(3) {
        overflow: hidden;
        flex: 1;
        position: relative;
        > img {
          width: 0.6rem;
          height: 0.6rem;
          position: absolute;
          top: 0.6rem;
          right: 0.5rem;
        }
      }
    }
    > p {
      width: 9.8rem;
      // padding-left: 0.2rem;
      > i {
        font-weight: 600;
        color: #ff4422;
      }
    }
  }
  .product-parameter {
    margin-left: 0.5rem;
    font-size: 0.6rem;
    // font-weight: 600;
    color: #333;
    .product-color {
      display: flex;
      height: 1.8rem;
      line-height: 1.8rem;
      > div {
        &:nth-child(1) {
          font-weight: normal;
          color: #999;
          padding-right: 0.4rem;
        }
        &:nth-child(3) {
          position: relative;
          flex: 1;
          > img {
            width: 0.6rem;
            height: 0.6rem;
            position: absolute;
            top: 0.6rem;
            right: 0.5rem;
          }
        }
      }
    }
    .product-address {
      font-size: 0.6rem;
      height: 2.9rem;
      display: flex;
      color: #333;
      font-weight: normal;
      > div {
        &:nth-child(1) {
          width: 1.6rem;
          font-size: 0.6rem;
          padding-right: 0.3rem;
          color: #999;
        }
        &:nth-child(2) {
          flex: 1;
          > p {
            &:nth-child(2) {
              margin-top: 0.5rem;
            }
            &:nth-child(1) {
              position: relative;
              > img {
                width: 0.6rem;
                height: 0.6rem;
                position: absolute;
                // top: 0.6rem;
                right: 0.5rem;
              }
            }
          }
        }
      }
    }
    .product-pay {
      font-size: 0.6rem;
      display: flex;
      height: 1.8rem;
      line-height: 1.8rem;
      > div {
        &:nth-child(1) {
          color: #999;
        }
        &:nth-child(2) {
          margin-left: 0.5rem;
        }
      }
    }
    .product-freight {
      display: flex;
      height: 1.8rem;
      line-height: 1.8rem;
      > div {
        &:nth-child(1) {
          color: #999;
        }
        &:nth-child(2) {
          margin-left: 0.5rem;
        }
      }
    }
    .product-weight {
      height: 1.8rem;
      display: flex;
      line-height: 1.8rem;
      position: relative;
      > div {
        &:nth-child(1) {
          color: #999;
        }
        &:nth-child(2) {
          margin-left: 0.5rem;
        }
        &:nth-child(3) {
          flex: 1;
          > img {
            width: 0.6rem;
            height: 0.6rem;
            position: absolute;
            right: 0.5rem;
            top: 0.6rem;
          }
        }
      }
    }
  }
  .product-evaluate {
    border-top: 0.2rem solid #f2f2f2;
    height: 11.95rem;
    font-size: 0.7rem;
    padding-left: 0.5rem;
    .product-top {
      display: flex;
      height: 1.8rem;
      line-height: 1.8rem;
      > p {
        &:nth-child(1) {
          font-weight: 600;
          color: #333;
        }
        &:nth-child(2) {
          flex: 1;
          text-align: right;
          > img {
            width: 0.6rem;
            height: 0.6rem;
            margin-right: 0.5rem;
          }
        }
      }
    }
    .product-evaluate-main {
      // display: flex;
      color: #333;
      font-size: 0.7rem;
      .product-evaluate-main-top {
        display: flex;
        height: 1.9rem;
        line-height: 1.9rem;
        > div {
          overflow: hidden;
          &:nth-child(1) {
            > img {
              width: 2.15rem;
              height: 0.55rem;
            }
          }
          &:nth-child(2) {
            padding-left: 4rem;
            flex: 1;
          }
          .evaluate-person-logo {
            // margin-top: 0.2rem;
            position: relative;
            top: 0.2rem;
          }
        }
      }
      .product-evaluate-main-middle {
        > p {
          font-size: 0.8rem;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 0.25rem;
        }
        .product-evaluate-images {
          > ul {
            display: flex;
            flex-wrap: wrap;
            > li {
              width: 3.7rem;
              height: 3.7rem;
              border-radius: 0.2rem;
              margin-right: 0.2rem;
              overflow: hidden;
              > img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
    .product-evaluate-all {
      overflow: hidden;
      > button {
        border: 1px solid #222;
        width: 5.1rem;
        height: 1.25rem;
        line-height: 1.25rem;
        background-color: #fff;
        border-radius: 0.2rem;
        color: #333;
        margin-left: 5rem;
        margin-top: 0.5rem;
        // margin-top: 5px;
      }
    }
  }
}
// vant自定义指示器样式start
.custom-indicator {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  padding: 0.1rem 0.25rem;
  font-size: 0.6rem;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
}
// vant自定义指示器样式end
// vant底部导航插件样式修改
.van-goods-action-button {
  height: 1.5rem;
  font-size: 0.7rem;
}
// vant底部导航插件样式修改start
</style>
